<template>
  <div class="city_body">
    <div class="city_list">
      <Scroller
        ref="city_List"
        :hanleToTouchEnd="hanleToTouchEnd"
        :handleToScroller="handleToScroller"
      >
        <div>
          <div class="pullDown">{{ pullDown }}</div>
          <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
              <!-- <li>上海</li>
          <li>北京</li> -->
              <li v-for="item in hotCity" :key="item.id" @click="handleToCity(item.nm,item.id)" >{{ item.nm }}</li>
            </ul>
          </div>
          <div class="city_sort" ref="city_sort">
            <!-- <div>
          <h2>A</h2>
          <ul>
            <li>阿拉善盟</li>
          </ul>
        </div> -->
            <div v-for="index in cityIndex">
              <h2>{{ index }}</h2>
              <ul>
                <li v-for="city in cityList[index]" :key="city.id" @click="handleToCity(city.nm,city.id)" >
                  {{ city.nm }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </Scroller>
    </div>
    <div class="city_index">
      <ul>
        <!-- <li>A</li> -->
        <li
          v-for="index in cityIndex"
          :key="index"
          @click="handleToIndex(index)"
        >
          {{ index }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "city",
  data() {
    return {
      cityList: {},
      hotCity: [],
      cityIndex: [],
      pullDown: "",
    };
  },
  mounted() {
    // console.log(window.localStorage);
    this.cityIndex = Array.from(new Array(26), (ele, index) => {
      return String.fromCharCode(65 + index);
    });
    if (
      window.localStorage.getItem("hotCity") === "" ||
      window.localStorage.getItem("cityList") === ""
    ) {
      // console.log(this.cityIndex);
      this.axios.get("citys").then((resp) => {
        if (resp.status === 200) {
          var data = resp.data;
          this.formatcityData(data);
        }
      });
    } else {
      this.hotCity = JSON.parse(window.localStorage.getItem("hotCity"));
      this.cityList = JSON.parse(window.localStorage.getItem("cityList"));
      // console.log(this.hotCity);
      // console.log(this.cityList);
    }
  },
  methods: {
    formatcityData(data) {
      var cityList = {};
      var hotCity = [];

      for (var d in data) {
        var firstLetter = data[d].py[0].toUpperCase();
        if (cityList.hasOwnProperty(firstLetter)) {
          cityList[firstLetter].push({ nm: data[d].nm, id: data[d].id });
        } else {
          cityList[firstLetter] = [{ nm: data[d].nm, id: data[d].id }];
        }
        if (data[d].isHot === 1) {
          hotCity.push({ nm: data[d].nm, id: data[d].id });
        }
      }
      //   console.log(cityList);
      //   console.log(hotCity);
      this.cityList = cityList;
      this.hotCity = hotCity;
      window.localStorage.setItem("hotCity", JSON.stringify(hotCity));
      window.localStorage.setItem("cityList", JSON.stringify(cityList));
    },
    handleToIndex(index) {
      var h2 = this.$refs.city_sort.getElementsByTagName("h2");
      // console.log(h2);
      // console.log(index);
      // console.log(h2[index.charCodeAt(0) - 65].offsetTop)
      // this.$refs.city_sort.parentNode.scrollTop =h2[index.charCodeAt(0) - 65].offsetTop;
      this.$refs.city_List.toScrollTop(-h2[index.charCodeAt(0) - 65].offsetTop);
    },
    handleToScroller(pos) {
      if (pos.y > 40) {
        this.pullDown = "往下拉更新数据";
      }
    },
    hanleToTouchEnd(pos) {
      if (pos.y > 50) {
        this.pullDown = "数据更新成功";
        setTimeout(() => {
          this.pullDown = "";
        }, 2000);
      }
    },
    handleToCity(nm,id){
      this.$store.commit('city/CITY_INFO',{nm,id})
      window.localStorage.setItem('nm',nm)
      window.localStorage.setItem('id',id)
      this.$router.push('/movie/Nowplaying')
    }
  },
};
</script>

<style scoped>
#content .city_body {
  margin-top: 45px;
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
.city_body .city_list {
  flex: 1;
  overflow: auto;
  background: #fff5f0;
}
.city_body .city_list::-webkit-scrollbar {
  background-color: transparent;
  width: 0;
}
.city_body .city_hot {
  margin-top: 20px;
}
.city_body .city_hot h2 {
  padding-left: 15px;
  line-height: 30px;
  font-size: 14px;
  background: #f0f0f0;
  font-weight: normal;
}
.city_body .city_hot ul li {
  float: left;
  background: #fff;
  width: 29%;
  height: 33px;
  margin-top: 15px;
  margin-left: 3%;
  padding: 0 4px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  line-height: 33px;
  text-align: center;
  box-sizing: border-box;
}
.city_body .city_sort div {
  margin-top: 20px;
}
.city_body .city_sort h2 {
  padding-left: 15px;
  line-height: 30px;
  font-size: 14px;
  background: #f0f0f0;
  font-weight: normal;
}
.city_body .city_sort ul {
  padding-left: 10px;
  margin-top: 10px;
}
.city_body .city_sort ul li {
  line-height: 30px;
  line-height: 30px;
}
.city_body .city_index {
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-left: 1px #e6e6e6 solid;
}
.city_list .pullDown {
  margin: 0;
  padding: 0;
  border: none;
}
</style>